@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body">
            <div class="panel-header">
                <div class="panel-title">
                    管理员
                </div>
                <el-tabs v-model="params.status" type="card" @tab-click="list">
                    <el-tab-pane label="全 部" name="0"></el-tab-pane>
                    <el-tab-pane label="正 常" name="1"></el-tab-pane>
                    <el-tab-pane label="锁 定" name="2"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                    <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                </div>
                <div class="panel-search">
                    <div class="panel-search-item">
                        <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入账号或者昵称" class="input-with-select">
                            <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          :data="listData.data" border>
                    <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                    <el-table-column prop="username" label="账户" width="180"></el-table-column>
                    <el-table-column prop="nickname" label="昵称" width="180"></el-table-column>
                    <el-table-column align="center" prop="role.name" label="角色" width="120"></el-table-column>
                    <el-table-column align="center" prop="status_text" label="状态" width="75">
                        <template slot-scope="scope">
                            <span v-html="scope.row.status_text"></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_at" label="注册日期" width="165"></el-table-column>
                    <el-table-column align="center" prop="updated_at" label="最近登录" width="165"></el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain> 编辑</el-button>
                            <el-button v-if="scope.row.id > 1 && scope.row.status == 1" @click="lock(scope.row.id)" icon="fa fa-lock" type="danger" size="mini" plain> 锁定</el-button>
                            <el-button v-if="scope.row.id >1 && scope.row.status == 2" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain> 启用</el-button>
                            <el-button v-if="scope.row.id >1" @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData && listData.total">
                    <div class="pagination-total">共 <em> @{{listData.total}} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
                <!-- 表单弹窗-->
                <el-dialog
                        v-if="dialog.show"
                        :title="dialog.title"
                        :top="dialog.top"
                        :visible.sync="dialog.show"
                        :width="dialog.width">
                    <el-form :model="form" ref="form" label-width="80px">
                        <el-form-item :rules="[{ required: true, message: '请输入管理员账号', trigger: 'blur'}]" label="账号：" prop="username">
                            <el-input clearable  v-model="form.username" placeholder="请输入管理员账号"></el-input>
                        </el-form-item>
                        <el-form-item :rules="[{ required: true, message: '请输入管理员昵称', trigger: 'blur'}]" label="昵称：" prop="nickname">
                            <el-input clearable v-model="form.nickname" placeholder="请输入管理员昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="密码：" :rules="[{ min: 6, message: '账号密码不能低于6位数', trigger: 'blur' }]"  prop="password">
                            <el-input v-if="form.id" type="password" clearable v-model="form.password" placeholder="用户密码,不填写默认不修改"></el-input>
                            <el-input v-else type="password" clearable v-model="form.password" placeholder="用户密码,不填写默认123456"></el-input>
                        </el-form-item>
                        <el-form-item label="角色：" prop="role_id" :rules="[{ required: true, message: '请选择角色', trigger: 'blur'}]">
                            <el-select v-model="form.role_id" clearable placeholder="请选择角色">
                                <el-option
                                        v-for="item in roles"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态：" required prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio :label="1" border>正常</el-radio>
                                <el-radio :label="2" border>锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
              </span>
                </el-dialog>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    params: {page: 1, kwd: '', status: 0},
                    loading: false,
                    dialog: {
                        title: '',
                        top: '15vh',
                        show: false,
                        width: '600px'
                    },
                    form:null,
                    roles: {!! $roles !!},
                }
            },
            created(){
                this.list();
            },
            methods: {
                //分页
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('admin.manage.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data;
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //新增
                create(){
                    this.form = {
                        id: 0,
                        nickname: '',
                        username: '',
                        status: 1,
                        password: '',
                        _token: "{{csrf_token()}}"
                    };
                    this.dialog.title = '新增管理员';
                    this.dialog.show = true;
                },
                //编辑
                edit(info){
                    this.form = {
                        id: info.id,
                        nickname: info.nickname,
                        username: info.username,
                        status: info.status,
                        role_id: info.role_id,
                        password: '',
                        _token: "{{csrf_token()}}"
                    };
                    this.dialog.title = '编辑管理员';
                    this.dialog.show = true;
                },
                //筛选
                search(){
                    this.params.page = 1;
                    this.list();
                },
                //锁定
                lock(id){
                    let that = this;
                    $.post("{{ route('admin.manage.lock') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.list();
                        }
                    },'JSON');
                },
                //激活
                active(id){
                    let that = this;
                    $.post("{{ route('admin.manage.active') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.list();
                        }
                    },'JSON');
                },
                //更新
                update(){
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let that = this;
                            $.post("{{ route('admin.manage.update') }}",this.form,function (res) {
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        type: 'success',
                                        duration: '1000',
                                        message: res.msg,
                                        onClose:() =>{
                                            that.dialog.show = false;
                                            that.list();
                                        }
                                    });
                                }
                            },'JSON');
                        }
                    });
                },
                //删除
                destroy(id){
                    let that = this;
                    this.$confirm('确定要删除该管理员信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.manage.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
            }
        });
    </script>
@endsection
